<template>
  <div class="px-3">
    <!-- 添加训练数据菜单 -->
    <div class="mb-4">
      <button
        @click="onShowTraining"
        class="flex items-center justify-between w-full px-4 py-2 text-left text-primary-600 dark:text-primary-400 rounded-md hover:bg-primary-50 dark:hover:bg-primary-900/20 transition-colors border border-primary-300 dark:border-primary-700"
      >
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0v6m0 0c-4.418 0-8-1.343-8-3m8 3c4.418 0 8-1.343 8-3" />
          </svg>
          <span>训练数据</span>
        </div>
      </button>
      <div v-if="openSection === 'addTraining'" class="mt-2 space-y-1 pl-4">
        <div class="px-4 py-2 text-sm text-gray-500 dark:text-gray-400">功能待实现</div>
      </div>
    </div>
    <!-- 查询历史菜单 -->
    <div class="mb-4">
      <button
        @click="toggleSection('history')"
        class="flex items-center justify-between w-full px-4 py-2 text-left text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
      >
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-primary-500 dark:text-primary-400" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd" />
          </svg>
          <span>查询历史</span>
        </div>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5 transition-transform"
          :class="{ 'rotate-180': openSection === 'history' }"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
      <div v-if="openSection === 'history'" class="mt-2 space-y-1 pl-4">
        <div v-if="isLoading" class="px-4 py-2 text-sm text-gray-500 dark:text-gray-400">
          <div class="flex items-center">
            <div class="animate-spin h-4 w-4 mr-2 border-t-2 border-b-2 border-primary-500 rounded-full"></div>
            加载中...
          </div>
        </div>
        <div v-else-if="historyItems.length === 0" class="px-4 py-2 text-sm text-gray-500 dark:text-gray-400">
          暂无查询历史
        </div>
        <button
          v-else
          v-for="(item, index) in historyItems"
          :key="index"
          @click="selectQuery(item)"
          class="w-full text-left px-4 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors truncate"
        >
          {{ item }}
        </button>
      </div>
    </div>
    <!-- 新问题菜单 -->
    <div class="mb-4">
      <button
        @click="onNewQuestion"
        class="flex items-center w-full px-4 py-2 text-left text-primary-600 dark:text-primary-400 rounded-md hover:bg-primary-50 dark:hover:bg-primary-900/20 transition-colors border border-primary-300 dark:border-primary-700"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
        <span>新问题</span>
      </button>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  name: 'AccordionNav',
  emits: ['select-query', 'show-training', 'show-main'],
  setup(props, { emit }) {
    const openSection = ref(null)
    const historyItems = ref([])
    const isLoading = ref(false)

    const toggleSection = (section) => {
      openSection.value = openSection.value === section ? null : section
    }

    const selectQuery = (query) => {
      emit('select-query', query)
    }

    // 新增：点击训练数据菜单时，通知父组件
    const onShowTraining = () => {
      emit('show-training')
    }

    // 新增：点击新问题菜单时，通知父组件
    const onNewQuestion = () => {
      emit('show-main')
    }

    // 添加训练数据方法
    const addTrainingData = () => {
      alert('添加训练数据功能待实现')
    }

    // 获取历史问题
    const fetchHistoryQuestions = async () => {
      try {
        const response = await fetch('/api/v0/get_question_history')
        const data = await response.json()

        // 检查各种可能的响应格式
        if (data && data.code === 200 && data.data && data.data.questions) {
          // 包装模式 - 提取question字段
          historyItems.value = data.data.questions
            .slice(0, 6)
            .map(item => typeof item === 'object' && item.question ? item.question : item)
        }
        else if (data && data.type === 'question_history' && data.questions) {
          // FastAPI原生响应模式 - 提取question字段
          historyItems.value = data.questions
            .slice(0, 6)
            .map(item => typeof item === 'object' && item.question ? item.question : item)
        }
        else {
          // 使用默认历史问题
          useDefaultHistory()
        }
      } catch (error) {
        // 使用默认历史问题
        useDefaultHistory()
      }
    }

    // 使用默认历史问题
    const useDefaultHistory = () => {
      historyItems.value = [
        '哪些国家的发票最多？',
        '哪个城市有最好的客户？',
        '谁是最好的客户？',
        '查询所有摇滚音乐听众的邮箱、姓名和流派，按邮箱排序',
        '谁在创作摇滚音乐？',
        '按国家统计销售总额'
      ]
    }

    onMounted(() => {
      fetchHistoryQuestions()
    })

    return {
      openSection,
      toggleSection,
      historyItems,
      isLoading,
      selectQuery,
      addTrainingData,
      onShowTraining,
      onNewQuestion
    }
  }
}
</script>
